<template>
    <div>
        <!-- 导航头部 -->
        <div class="ls-User__centent ls-card m-t-16">
            <el-form label-width="120px" size="small" ref="formRef" :model="localForm" :rules="formRules">
                <el-form-item label="视频标题:">
                    <el-input v-model="form.title" disabled />
                </el-form-item>
               
                <el-form-item label="最小值:"  required>
                    <el-input v-model="localForm.start_interval"   />
                </el-form-item>
                <el-form-item label="最大值:"  required>
                    <el-input v-model="localForm.end_interval"   />
                </el-form-item>
                <!-- // 播放规则:1开始播放触发 2播放截止触发 选填 默认是播放截止触发 -->
                <el-form-item label="播放规则:" required>
                    <el-radio :label="1" v-model="localForm.rule" :disabled="disabled">开始播放触发</el-radio>
                    <el-radio :label="2" v-model="localForm.rule" :disabled="disabled">播放截止触发</el-radio>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Ref,
    Vue
} from 'vue-property-decorator'

import { apiSetRuleVideo } from '@/api/application/red_envelope_video'
import Editor from '@/components/editor.vue'
import MaterialSelect from '@/components/material-select/index.vue'
import { IRedEnvelopeVideoEditFormInfo } from '@/interface/red_envelope_video.d'
import { PageMode } from '@/utils/type'

import { static_red_envelope_video } from './const'

@Component({
    components: {
        MaterialSelect,
        Editor,
    }
})

export default class VideoDetail extends Vue {
    @Ref() readonly formRef!: Element
    @Prop({ default: PageMode.ADD }) mode!: string
    @Prop({
        default() {
            return {}
        }
    })
    editInfo!: IRedEnvelopeVideoEditFormInfo | null
    form: IRedEnvelopeVideoEditFormInfo = {
        ...static_red_envelope_video
    }
    localForm = {
        start_interval: '',
        end_interval: '',
        rule: 2 // 播放规则:1开始播放触发 2播放截止触发 选填 默认是播放截止触发
    }
    formRules = {
        start_interval: [
            {
                required: true,
                message: '请填写最小值',
                trigger: 'blur'
            }
        ],
        end_interval: [
            {
                required: true,
                message: '请填写最大值',
                trigger: 'blur'
            }
        ]
       
    }
    disabled = false //是否禁用 查看详情时禁用
   
    mounted() {
        this.initFormInfo()
    }
    initFormInfo() {
        const formInfo = this.editInfo || this.form
        
        if (this.mode === PageMode.ADD) {
            this.form = {
                ...static_red_envelope_video
            }
            return
        }
        this.$nextTick(() => {
            this.form = Object.assign({}, formInfo)
        })
       
    }
    
  
    changes(e: any) {}
    
    // 添加
    $refs!: {
        formRef: any
    }
    // 提交
    onSubmit() {
        this.$refs.formRef.validate((valid: boolean): any => {
            if (!valid) {
                return
            }
            this.submitHandler()
        })
    }
    // 添加视频
    submitHandler() {
        // 传参
        const vm = this
        const config = {
            ...vm.localForm,
            video_id: vm.editInfo?.id,
            // @ts-ignore
            rule: vm.editInfo?.rule
        }
        apiSetRuleVideo(config)
            .then(res => {
                vm.successHandler()
            })
            .catch((err: Error) => {})
    }
   
    successHandler() {
        this.$emit("success")
    }
}
</script>
<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
../../../utils/videoUpload